<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>教师端商品管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        success: '#10B981',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        info: '#06B6D4',
                        light: '#F8FAFC',
                        dark: '#1E293B',
                        live: '#EF4444' // 直播按钮颜色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-soft {
                box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.1);
            }
            .transition-smooth {
                transition: all 0.3s ease;
            }
            /* 视频容器样式 */
            .video-container {
                position: relative;
                width: 100%;
                padding-top: 56.25%; /* 16:9 比例 */
                border-radius: 0.375rem;
                overflow: hidden;
                background-color: #000;
            }
            .video-container iframe,
            .video-container video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .video-placeholder {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f3f4f6;
                color: #64748b;
            }
            /* 个人中心下拉菜单样式 */
            .user-dropdown {
                position: relative;
            }
            .dropdown-menu {
                position: absolute;
                right: 0;
                top: 100%;
                margin-top: 0.5rem;
                background: white;
                border-radius: 0.375rem;
                padding: 0.5rem 0;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                z-index: 10;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                transition: all 0.3s ease;
            }
            .user-dropdown.active .dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            .dropdown-menu a, .dropdown-menu button {
                display: block;
                width: 100%;
                padding: 0.5rem 1.5rem;
                color: #1E293B;
                text-decoration: none;
                font-size: 0.875rem;
                text-align: left;
                background: none;
                border: none;
            }
            .dropdown-menu a:hover, .dropdown-menu button:hover {
                background-color: #F3F4F6;
                color: #3B82F6;
            }
            .submenu {
                padding-left: 1rem;
                background-color: #F9FAFB;
            }
            .rotate-icon {
                transition: transform 0.3s ease;
            }
            .rotate-icon.rotate {
                transform: rotate(180deg);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<div class="container mx-auto px-4 py-8">
    <!-- 顶部导航栏 -->
    <div class="flex flex-wrap justify-between items-center mb-8 gap-4">
        <div class="flex gap-4">
            <a href="${pageContext.request.contextPath}/teacher/add" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg shadow-soft transition-smooth flex items-center">
                <i class="fa fa-plus-circle mr-2"></i> 添加教学资源
            </a>

            <!-- 直播按钮 -->
            <a href="${pageContext.request.contextPath}/teacher/video" class="bg-live hover:bg-live/90 text-white px-6 py-3 rounded-lg shadow-soft transition-smooth flex items-center">
                <i class="fa fa-video-camera mr-2"></i> 开启直播教学
            </a>
        </div>

        <div class="flex items-center space-x-4">
            <form action="${pageContext.request.contextPath}/teacher/list" method="get">
                <div class="relative">
                    <!-- 隐藏字段传递老师姓名 -->
                    <input type="hidden" name="name" value="${teacherName}">
                    <input type="text" name="type" value="${searchType}" placeholder="搜索教学资源..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <button type="submit" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </form>

            <!-- 个人中心下拉菜单 -->
            <div class="user-dropdown">
                <button id="userMenuBtn" class="bg-white hover:bg-gray-100 text-dark px-4 py-2 rounded-lg shadow-soft transition-smooth flex items-center cursor-pointer">
                    <i class="fa fa-user-circle mr-2"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-down ml-2 text-xs"></i>
                </button>
                <div class="dropdown-menu" id="userDropdownMenu">
                    <a href="${pageContext.request.contextPath}/teacher/update/${user.uid}">
                        <i class="fa fa-user-o mr-2 text-gray-500"></i> 修改个人信息
                    </a>
                    <a href="${pageContext.request.contextPath}/teacher/yield">
                        <i class="fa fa-money mr-2 text-gray-500"></i> 教学收益
                    </a>

                    <!-- 设置子菜单 -->
                    <div class="relative">
                        <button id="settingsBtn" class="flex items-center justify-between w-full">
                            <span><i class="fa fa-cog mr-2 text-gray-500"></i> 设置</span>
                            <i id="settingsCaret" class="fa fa-caret-down text-xs text-gray-400 rotate-icon"></i>
                        </button>
                        <div id="settingsSubmenu" class="submenu hidden">
                            <div class="px-4 py-2 flex items-center">
                                <input type="checkbox" id="permissionCheck" class="mr-2 rounded text-primary focus:ring-primary">
                                <label for="permissionCheck" class="text-sm text-gray-700">获取权限</label>
                            </div>
                            <a href="${pageContext.request.contextPath}/logout" class="text-red-500 hover:text-red-600">
                                <i class="fa fa-sign-out mr-2"></i> 退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面标题 -->
    <div class="text-center mb-8">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">教师端教学资源管理</h1>
        <p class="text-gray-600">管理您的教学资源信息，轻松进行添加、编辑和删除操作</p>
    </div>

    <!-- 资源统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-soft p-6 flex items-center">
            <div class="bg-primary/10 p-4 rounded-lg mr-4">
                <i class="fa fa-book text-2xl text-primary"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">资源总数</p>
                <p class="text-2xl font-bold text-dark">${fn:length(goodsList)}</p>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-soft p-6 flex items-center">
            <div class="bg-success/10 p-4 rounded-lg mr-4">
                <i class="fa fa-check-circle text-2xl text-success"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">已发布资源</p>
                <p class="text-2xl font-bold text-dark">${fn:length(goodsList)}</p>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-soft p-6 flex items-center">
            <div class="bg-warning/10 p-4 rounded-lg mr-4">
                <i class="fa fa-clock-o text-2xl text-warning"></i>
            </div>
            <div>
                <p class="text-gray-500 text-sm">待审核</p>
                <p class="text-2xl font-bold text-dark">0</p>
            </div>
        </div>
    </div>

    <!-- 资源列表 -->
    <div class="bg-white rounded-xl shadow-soft overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                <tr class="bg-gray-50">
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资源信息</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类型</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">视频预览</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">作者</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时长</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <c:if test="${not empty goodsList}">
                    <c:forEach items="${goodsList}" var="goods" varStatus="status">
                        <tr class="hover:bg-gray-50 transition-smooth">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">#${goods.gid}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-12 w-12">
                                        <c:if test="${not empty goods.img}">
                                            <img class="h-12 w-12 rounded-md object-cover" src="${goods.img}" alt="${fn:escapeXml(goods.gname)}">
                                        </c:if>
                                        <c:if test="${empty goods.img}">
                                            <div class="h-12 w-12 rounded-md bg-gray-200 flex items-center justify-center">
                                                <i class="fa fa-book text-gray-400"></i>
                                            </div>
                                        </c:if>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">${fn:escapeXml(goods.gname)}</div>
                                        <div class="text-sm text-gray-500">${fn:substring(goods.describe1, 0, 30)}${fn:length(goods.describe1) > 30 ? '...' : ''}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">¥${goods.price}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <c:choose>
                                    <c:when test="${not empty searchType and fn:containsIgnoreCase(goods.type,searchType)}">
                                        ${fn:replace(goods.type,searchType,
                                    '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">'
                                    += searchType +=
                            '</span>')}
                                    </c:when>
                                    <c:otherwise>
                                        ${goods.type}
                                    </c:otherwise>
                                </c:choose>
                            </td>
                            <td class="px-6 py-4">
                                <div class="video-container">
                                    <c:choose>
                                        <c:when test="${not empty goods.video}">
                                            <!-- 如果是视频链接，显示视频播放器 -->
                                            <video controls poster="${goods.img}" class="video-player">
                                                <source src="${goods.video}" type="video/mp4">
                                                您的浏览器不支持视频播放
                                            </video>
                                        </c:when>
                                        <c:when test="${fn:contains(goods.video, 'youtube.com') or fn:contains(goods.video, 'youku.com') or fn:contains(goods.video, 'tudou.com')}">
                                            <!-- 如果是第三方视频链接，使用iframe嵌入 -->
                                            <iframe src="${goods.video}" frameborder="0" allowfullscreen></iframe>
                                        </c:when>
                                        <c:otherwise>
                                            <!-- 没有视频时显示占位符 -->
                                            <div class="video-placeholder">
                                                <i class="fa fa-film text-2xl"></i>
                                                <span class="ml-2">无视频</span>
                                            </div>
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    ${goods.author}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    ${not empty goods.duration ? goods.duration : 'N/A'}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <div class="flex space-x-2">
                                    <a href="${pageContext.request.contextPath}/teacher/edit/${goods.gid}" class="text-indigo-600 hover:text-indigo-900 transition-smooth flex items-center">
                                        <i class="fa fa-pencil mr-1"></i> 编辑
                                    </a>
                                    <a href="${pageContext.request.contextPath}/teacher/delete/${goods.gid}"  class="text-red-600 hover:text-red-900 transition-smooth flex items-center">
                                        <i class="fa fa-trash mr-1"></i> 删除
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
                </tbody>
            </table>
        </div>

        <!-- 空状态 -->
        <c:if test="${empty goodsList}">
            <div class="py-16 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 mb-4">
                    <i class="fa fa-book text-blue-500 text-xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">暂无教学资源</h3>
                <p class="text-gray-500 max-w-md mx-auto mb-6">您还没有添加任何教学资源，点击上方"添加教学资源"按钮开始创建您的第一个教学资源吧。</p>
                <a href="/addGoods" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 transition-smooth">
                    <i class="fa fa-plus-circle mr-2"></i> 添加教学资源
                </a>
            </div>
        </c:if>

        <!-- 分页 -->
        <c:if test="${not empty goodsList}">
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">24</span> 条结果
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">上一页</span>
                                <i class="fa fa-chevron-left text-xs"></i>
                            </a>
                            <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">1</a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a>
                            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">24</a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">下一页</span>
                                <i class="fa fa-chevron-right text-xs"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </c:if>
    </div>

    <!-- 页脚 -->
    <footer class="mt-12 pt-8 pb-6 border-t border-gray-200">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <p class="text-sm text-gray-500">© 2025 教师端教学资源管理系统. 保留所有权利.</p>
            <div class="flex space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-500 hover:text-gray-700 transition-smooth">
                    <i class="fa fa-question-circle"></i> 帮助中心
                </a>
                <a href="#" class="text-gray-500 hover:text-gray-700 transition-smooth">
                    <i class="fa fa-file-text-o"></i> 隐私政策
                </a>
                <a href="#" class="text-gray-500 hover:text-gray-700 transition-smooth">
                    <i class="fa fa-phone"></i> 联系我们
                </a>
            </div>
        </div>
    </footer>
</div>

<!-- JavaScript交互代码 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 个人中心下拉菜单交互
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userDropdownMenu = document.getElementById('userDropdownMenu');
        const userDropdown = document.querySelector('.user-dropdown');

        userMenuBtn.addEventListener('click', function(e) {
            e.preventDefault();
            userDropdown.classList.toggle('active');
        });

        // 点击页面其他地方关闭下拉菜单
        document.addEventListener('click', function(e) {
            if (!userDropdown.contains(e.target)) {
                userDropdown.classList.remove('active');
                settingsSubmenu.classList.add('hidden');
                settingsCaret.classList.remove('rotate');
            }
        });

        // 设置子菜单交互
        const settingsBtn = document.getElementById('settingsBtn');
        const settingsSubmenu = document.getElementById('settingsSubmenu');
        const settingsCaret = document.getElementById('settingsCaret');

        settingsBtn.addEventListener('click', function(e) {
            e.stopPropagation(); // 防止事件冒泡到userMenuBtn
            settingsSubmenu.classList.toggle('hidden');
            settingsCaret.classList.toggle('rotate');
        });

        // 处理权限勾选框点击事件
        const permissionCheck = document.getElementById('permissionCheck');
        permissionCheck.addEventListener('change', function() {
            if (this.checked) {
                console.log('获取权限已勾选');
                // 这里可以添加实际获取权限的AJAX请求
            } else {
                console.log('获取权限已取消');
            }
        });

        // 删除资源确认对话框
        function deleteResource(id, name) {
            if (confirm(`确定要删除教学资源 "${name}" 吗？此操作不可撤销。`)) {
                window.location.href = `/deleteResource?id=${id}`;
            }
        }
    });
</script>
</body>
</html>